<template>
  <div class="charts">
    <div id="echarts" class="echarts-container">
    </div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require("echarts/lib/chart/line")
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')



export default {
  data () {
    return {
        msg: 'Welcome to Your Vue.js App'
    }
  },//end data()

  mounted(){
    this.getDbData();
    // this.drawLine();
  },

  methods: {
    resizeCharts (echartsDom,chartBox) {
      echartsDom.style.width = window.innerWidth+'px';
      echartsDom.style.height = (window.innerHeight-100)+'px';
    },
    getDbData(){
      const $this =this;

      this.$http.get('/warn/api/dashbord')
        .then(res => {
          $this.drawLine(res.data);
        })
        .catch(err => {

        })
    },
    drawLine(dbData){
      let chartBox = document.getElementsByClassName('charts')[0]
      let echartsDom = document.getElementById('echarts')

      this.resizeCharts(echartsDom,chartBox);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(echartsDom);
      // 绘制图表
      myChart.setOption({
          title: {
             left: 'left',
             text: '监控预警统计'
            },
          tooltip: {
            trigger : "axis",
            formatter : '{b}<br />{a0}: {c0}(个) <br /> {a1}: {c1}(个)'
          },
          xAxis: {
            type: "category",
            name: "时间",
            nameTextStyle :{
              fontWeight : "bold"
            },
            nameLocation: "end",
              data: dbData.data.Doing.date
          },
          yAxis: {
            name: "单位(个)",
            nameTextStyle :{
              fontWeight : "bold"
            }
          },
          series: [{
              name: '预警提示',
              type: 'line',
              data: dbData.data.Reading.value
          },{
            name: '预警待办',
            type: 'line',
            data: dbData.data.Doing.value
          }]
      });
    }
  }//end methods
};
</script>

<style scoped>
  .echarts-container {
    /* width: 1000px;
    height: 1000px; */
  }
</style>
